<template>
  <section class="financial-list">
    <section class="collect" @click="jumpPage">
      <div class="left-aside">
        <h2>{{newsObj.brief}}</h2>
        <section class="Cleft clearfix">
          <img class="fl" src="./../assets/icon/eyes.png" style="width:0.1rem;height:0.2rem;">
          <span class="fl">{{newsObj.name}}</span>
        </section>
        <section class="Cright">
          <img src="./../assets/icon/clock.png" style="width:0.2rem;height:0.2rem;">
          <span>{{newsObj.date}}</span>
        </section>
        <div style="clear: both"></div>
      </div>
      <div class="right-aside">
        <img :src="newsObj.img" style="border-radius: 0.2rem;">
      </div>
      <div style="clear: both"></div>
    </section>
  </section>
</template>

<script>
  export default {
    props: ['newsObj'],
    data() {
      return {}
    },
    computed: {},
    methods: {
      jumpPage: function() {
        //window.location.href = this.newsObj.url
      }
    }
  }
</script>

<style scoped>
  .financial-list {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 0.28rem 0;
    border-bottom: 1px solid #ccc;
  }

  .financial-list .collect {
    width: 92%;
    margin: 0 auto;
  }

  .financial-list .collect .left-aside {
    width: 63%;
    float: left;
  }

  .financial-list .collect .right-aside {
    width: 32%;
    height: 2rem;
    float: left;
    margin-left: 0.3rem;
  }

  .financial-list .collect h2 {
    width: 100%;
    height: 0.96rem;
    font-size: 0.32rem;
    color: #333333;
    line-height: 0.48rem;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
  }

  .financial-list .collect .right-aside img {
    width: 100%;
    height: 100%;
  }

  .financial-list .collect .left-aside .Cleft {
    width: 45%;
    float: left;
    margin-top: 0.66rem;
  }

  .financial-list .collect .left-aside .Cleft span {
    display: block;
    width: 1.4rem;
    margin-left: 0.05rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
  }

  .financial-list .collect .left-aside .Cright {
    width: 55%;
    float: right;
    margin-top: 0.66rem;
  }

  .financial-list .collect .right-aside .Cright span {
    display: inline-block;
    margin: 0.04rem 0 0 0.05rem;
  }

  .financial-list .collect .right-aside span {
    font-size: 0.2rem;
    color: #999999;
  }


  .financial-list .collect .left-aside .Cleft img,
  .financial-list .collect .left-aside .Cright img {
    width: 0.18rem;
    height: 0.24rem;
    margin-top: 0.09rem;
  }
</style>
